<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'HomeView',
  setup() {
    const router = useRouter();
    const selectedSubTab = ref('recommendations'); // 默认选中 "为你推荐"
    const subNavigation = ref(null); // 用于引用附属导航栏的 DOM 元素

    const featuredAlbums = ref([
      { cover: '/covers/album1.jpg', title: '专辑1' },
      { cover: '/covers/album2.jpg', title: '专辑2' },
      { cover: '/covers/album3.jpg', title: '专辑3' },
      { cover: '/covers/album4.jpg', title: '专辑4' },
    ])

    const recommendations = ref([
      {
        id: 1,
        title: '每日推荐',
        description: '根据你的听歌习惯推荐',
        cover: '/covers/recommend1.jpg'
      },
      {
        id: 2,
        title: '私人FM',
        description: '发现更多音乐可能',
        cover: '/covers/recommend2.jpg'
      },
      {
        id: 3,
        title: '热门歌单',
        description: '大家都在听什么',
        cover: '/covers/recommend3.jpg'
      },
      {
        id: 4,
        title: '新歌速递',
        description: '最新音乐抢先听',
        cover: '/covers/recommend4.jpg'
      }
    ])

    const playlists = ref([
      {
        id: 1,
        title: '2024年度热门',
        creator: '音乐库',
        cover: '/covers/playlist1.jpg',
        songCount: 50
      },
      {
        id: 2,
        title: '经典老歌精选',
        creator: '音乐库',
        cover: '/covers/playlist2.jpg',
        songCount: 100
      },
      {
        id: 3,
        title: '轻音乐放松',
        creator: '音乐库',
        cover: '/covers/playlist3.jpg',
        songCount: 30
      },
      {
        id: 4,
        title: '流行热歌榜',
        creator: '音乐库',
        cover: '/covers/playlist4.jpg',
        songCount: 40
      }
    ])

    const newReleases = ref([
      {
        id: 1,
        title: '新歌1',
        artist: '艺术家1',
        cover: '/covers/new1.jpg'
      },
      {
        id: 2,
        title: '新歌2',
        artist: '艺术家2',
        cover: '/covers/new2.jpg'
      },
      {
        id: 3,
        title: '新歌3',
        artist: '艺术家3',
        cover: '/covers/new3.jpg'
      },
      {
        id: 4,
        title: '新歌4',
        artist: '艺术家4',
        cover: '/covers/new4.jpg'
      }
    ])

    const charts = ref([
      {
        id: 1,
        title: '排行榜1',
        artist: '艺术家1',
        cover: '/covers/chart1.jpg'
      },
      {
        id: 2,
        title: '排行榜2',
        artist: '艺术家2',
        cover: '/covers/chart2.jpg'
      },
      {
        id: 3,
        title: '排行榜3',
        artist: '艺术家3',
        cover: '/covers/chart3.jpg'
      },
      {
        id: 4,
        title: '排行榜4',
        artist: '艺术家4',
        cover: '/covers/chart4.jpg'
      }
    ])

    const handleExplore = () => {
      // 滚动到附属导航栏
      if (subNavigation.value) {
        subNavigation.value.scrollIntoView({ behavior: 'smooth' });
      }
    };

    const handleCreatePlaylist = () => {
      // 导航到我的音乐页面并切换到歌单视图
      router.push('/music-library?section=playlists');
    };

    return {
      featuredAlbums,
      recommendations,
      playlists,
      newReleases,
      charts,
      selectedSubTab,
      subNavigation,
      handleExplore,
      handleCreatePlaylist,
    }
  }
}
</script>

<template>
  <div class="home-container">
    <!-- 顶部横幅 -->
    <section class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">发现你的音乐世界</h1>
        <p class="hero-subtitle">探索无限音乐可能，打造专属音乐体验</p>
        <div class="hero-actions">
          <button class="btn btn-primary" @click="handleExplore">开始探索</button>
          <button class="btn btn-accent" @click="handleCreatePlaylist">创建歌单</button>
        </div>
      </div>
      <div class="hero-visual">
        <div class="floating-albums">
          <div class="album" v-for="(album, index) in featuredAlbums" :key="index"
               :style="{ animationDelay: `${index * 0.2}s` }">
            <img :src="album.cover" :alt="album.title">
          </div>
        </div>
      </div>
    </section>

    <!-- 附属导航栏 -->
    <div class="sub-navigation" ref="subNavigation">
      <button
        :class="{ active: selectedSubTab === 'recommendations' }"
        @click="selectedSubTab = 'recommendations'"
      >
        为你推荐
      </button>
      <button
        :class="{ active: selectedSubTab === 'playlists' }"
        @click="selectedSubTab = 'playlists'"
      >
        热门歌单
      </button>
      <button
        :class="{ active: selectedSubTab === 'newReleases' }"
        @click="selectedSubTab = 'newReleases'"
      >
        最新音乐
      </button>
      <button
        :class="{ active: selectedSubTab === 'charts' }"
        @click="selectedSubTab = 'charts'"
      >
        排行榜
      </button>
    </div>

    <!-- 内容区域 - 根据附属导航栏切换 -->
    <section v-if="selectedSubTab === 'recommendations'" class="recommendations">
      <h2 class="section-title">为你推荐</h2>
      <div class="recommendation-grid">
        <div class="recommendation-card" v-for="item in recommendations" :key="item.id">
          <div class="card-image">
            <img :src="item.cover" :alt="item.title">
            <div class="card-overlay">
              <button class="play-btn">▶</button>
            </div>
          </div>
          <div class="card-content">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 热门歌单 -->
    <section v-if="selectedSubTab === 'playlists'" class="playlists">
      <h2 class="section-title">热门歌单</h2>
      <div class="playlist-grid">
        <div class="playlist-card" v-for="playlist in playlists" :key="playlist.id">
          <div class="playlist-cover">
            <img :src="playlist.cover" :alt="playlist.title">
            <div class="playlist-info">
              <span class="playlist-count">{{ playlist.songCount }}首歌曲</span>
            </div>
          </div>
          <h3>{{ playlist.title }}</h3>
          <p>{{ playlist.creator }}</p>
        </div>
      </div>
    </section>

    <!-- 最新音乐 -->
    <section v-if="selectedSubTab === 'newReleases'" class="new-releases">
      <h2 class="section-title">最新音乐</h2>
      <div class="releases-grid">
        <div class="release-card" v-for="release in newReleases" :key="release.id">
          <div class="release-cover">
            <img :src="release.cover" :alt="release.title">
            <div class="release-overlay">
              <button class="play-btn">▶</button>
            </div>
          </div>
          <div class="release-info">
            <h3>{{ release.title }}</h3>
            <p>{{ release.artist }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 排行榜 -->
    <section v-if="selectedSubTab === 'charts'" class="charts">
      <h2 class="section-title">排行榜</h2>
      <div class="charts-grid">
        <div class="chart-item" v-for="chart in charts" :key="chart.id">
          <div class="chart-cover">
            <img :src="chart.cover" :alt="chart.title">
          </div>
          <div class="chart-info">
            <h3>{{ chart.title }}</h3>
            <p>{{ chart.artist }}</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.home-container {
  padding: var(--spacing-lg);
  max-width: 1400px;
  margin: 0 auto;
}

/* 顶部横幅 */
.hero-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  padding: var(--spacing-2xl) 0;
  min-height: 500px;
  align-items: center;
}

.hero-content {
  animation: slideUp var(--transition-slow) ease-out;
}

.hero-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
}

.hero-actions {
  display: flex;
  gap: var(--spacing-md);
}

.hero-visual {
  position: relative;
  height: 400px;
}

.floating-albums {
  position: relative;
  width: 100%;
  height: 100%;
}

.album {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: float 6s ease-in-out infinite;
}

.album img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album:nth-child(1) { top: 0; left: 0; }
.album:nth-child(2) { top: 20%; right: 0; }
.album:nth-child(3) { bottom: 0; left: 20%; }
.album:nth-child(4) { bottom: 20%; right: 20%; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

/* 附属导航栏样式 */
.sub-navigation {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-3xl);
  margin-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--spacing-sm);
}

.sub-navigation button {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-lg);
  color: var(--text-color-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
}

.sub-navigation button:hover {
  color: var(--primary-color);
}

.sub-navigation button.active {
  color: var(--primary-color);
  font-weight: 600;
}

.sub-navigation button.active::after {
  content: '';
  position: absolute;
  bottom: -1px; /* 覆盖 border-bottom */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color);
  animation: underline-fade-in 0.3s forwards;
}

@keyframes underline-fade-in {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* 推荐部分 */
.recommendations {
  margin-bottom: var(--spacing-3xl);
}

.recommendations .section-title {
  display: none; /* 子导航栏已包含标题 */
}

.recommendation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.recommendation-card {
  background: var(--surface-light);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: transform var(--transition-normal);
}

.recommendation-card:hover {
  transform: translateY(-5px);
}

.card-image {
  position: relative;
  padding-top: 100%;
}

.card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.recommendation-card:hover .card-overlay {
  opacity: 1;
}

.play-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary-color);
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform var(--transition-normal);
}

.play-btn:hover {
  transform: scale(1.1);
}

.card-content {
  padding: var(--spacing-md);
}

.card-content h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.card-content p {
  margin: var(--spacing-xs) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* 歌单部分 */
.playlists {
  margin-bottom: var(--spacing-3xl);
}

.playlists .section-title {
  display: none; /* 子导航栏已包含标题 */
}

.playlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.playlist-card {
  background: var(--surface-light);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  transition: transform var(--transition-normal);
}

.playlist-card:hover {
  transform: translateY(-5px);
}

.playlist-cover {
  position: relative;
  padding-top: 100%;
}

.playlist-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-sm);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
}

.playlist-count {
  font-size: var(--font-size-sm);
}

.playlist-card h3 {
  margin: var(--spacing-sm);
  font-size: var(--font-size-md);
  color: var(--text-primary);
}

.playlist-card p {
  margin: 0 var(--spacing-sm) var(--spacing-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* 最新音乐部分 */
.new-releases {
  margin-bottom: var(--spacing-3xl);
}

.new-releases .section-title {
  display: none; /* 子导航栏已包含标题 */
}

.releases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--spacing-lg);
}

.release-card {
  background-color: var(--surface-light);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  cursor: pointer;
}

.release-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.release-cover {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
  overflow: hidden;
}

.release-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.release-card:hover .release-cover img {
  transform: scale(1.05);
}

.release-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.release-card:hover .release-overlay {
  opacity: 1;
}

.release-info {
  padding: var(--spacing-md);
  text-align: center;
}

.release-info h3 {
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-xs);
  color: var(--text-color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.release-info p {
  font-size: var(--font-size-sm);
  color: var(--text-color-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 排行榜样式 */
.charts {
  margin-bottom: var(--spacing-3xl);
}

.charts .section-title {
  display: none; /* 子导航栏已包含标题 */
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 更宽的列 */
  gap: var(--spacing-lg);
}

.chart-item {
  display: flex;
  align-items: center;
  background-color: var(--surface-light);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.chart-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.chart-cover {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-md);
}

.chart-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chart-info {
  padding: var(--spacing-md);
  flex-grow: 1;
}

.chart-info h3 {
  font-size: var(--font-size-md);
  margin: 0;
  color: var(--text-color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-info p {
  font-size: var(--font-size-sm);
  color: var(--text-color-secondary);
  margin-top: var(--spacing-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .hero-section {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-visual {
    display: none;
  }

  .recommendation-grid,
  .playlist-grid,
  .releases-grid,
  .charts-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (max-width: 768px) {
  .home-container {
    padding: var(--spacing-md);
  }

  .hero-title {
    font-size: var(--font-size-2xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-md);
  }

  .section-title {
    font-size: var(--font-size-xl);
  }

  .recommendation-grid,
  .playlist-grid,
  .releases-grid,
  .charts-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
  }

  .recommendation-grid,
  .playlist-grid,
  .releases-grid,
  .charts-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
</style> 